<template>
  <scroll-view :scroll-x="true" class="ag-listimage">
    <view class="ag-listimage__inner">
      <image :src="getImageBase64(itempic)" class="ag-listimage__item" v-for="(itempic,index) in woitempicture" :key="itempic.ImageId"/>
      <!-- <image class="ag-listimage__item" />
      <image class="ag-listimage__item" />
      <image class="ag-listimage__item" />
      <image class="ag-listimage__item" /> -->
    </view>
  </scroll-view>
</template>
<script>
export default {
   props:{
	   woitempicture:{
		   type: Array,
		   default:[]
	   }
   },
   methods:{
	   getImageBase64(itempic){
		   let srcbase64 = `data:image/${itempic.FileType.replace('.','')};base64,${itempic.ImageContent}`;
		   return srcbase64;
	   }
   }
}
</script>
<style lang="scss">
.ag-listimage{

  &__inner{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 180rpx;
    &::before{
      content: "";
      width: 40rpx;
      flex-shrink: 0;
    }
    &::after{
      content: "";
      width: 20rpx;
      flex-shrink: 0;
    }
  }
  &__item{
    width: 210rpx;
    height: 180rpx;
    border-radius: 4rpx;
    background: gray;
    margin-right: 20rpx;
    flex-shrink: 0;
  }
}
</style>